
<style scoped>
.handle-box {
    margin: 0 0 20px;
}
</style>
<!-- tsx -->
<template>
    <div class="package">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-tickets"></i> 每月商品销售统计 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-select placeholder="卡片服务类别" style="width: 200px; margin: 0 20px 0 0" clearable v-model="query.checkServer">
                    <el-option v-for="(item,index) in rankList" :key="index" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <el-select placeholder="卡片级别" style="width: 200px; margin: 0 20px 0 0" clearable v-model="query.rank">
                    <el-option v-for="(item,index) in serverList" :key="index" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <el-button type="primary" @click="getList" size="small" >搜索</el-button>
                <el-button type="primary" @click="showadd = true" size="small" style="margin: 0 0 0 20px">添加</el-button>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                <!-- <el-table-column prop="id" width="250" label="ID" align="center"></el-table-column> -->
                <el-table-column prop="name" label="卡片名称" align="center"></el-table-column>
                <el-table-column prop="IsGiftPackage" label="是否赠送礼包" align="center"></el-table-column>
                <el-table-column prop="checkServer" label="卡片服务" align="center"></el-table-column>
                <el-table-column prop="giftMonth" label="赠送服务费 月" align="center"></el-table-column>
                <el-table-column prop="defaultRank" label="卡片会员级别" align="center"></el-table-column>
                <el-table-column prop="status" label="卡片状态" align="center">
                    <template slot-scope="scope">
                        <span style="color:#00BC00" v-if="scope.row.status == '启用'">{{scope.row.status}}</span>
                        <span style="color:#F56C6C" v-else>{{scope.row.status}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createdOn" label="创建时间" width="150" align="center"></el-table-column>
                <el-table-column label="操作" width="80" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger" v-if="scope.row.status == '启用'" @click="close(scope.row.id)">禁用</el-button>
                        <el-button size="mini" type="success" v-else @click="open(scope.row.id)">启用</el-button>
                        <!-- <el-button size="mini" type="primary" @click="queryDetail(scope.row.id)">详情</el-button> -->
                        <!-- <el-button size="mini" type="warning" @click="exportData(scope.row.id)">导出</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    @size-change="sizeChange"
                    @current-change="pageChange"
                    :current-page="query.pageIndex"
                    :page-sizes="[20, 50, 100, 200]"
                    :page-size="query.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal"
                >
                </el-pagination>
            </div>
        </div>

        <el-dialog title="新增" :visible.sync="showadd" width="400px">
            <el-form ref="send" :model="addFrom" label-width="100px">
                <el-form-item label="卡片名称:">
                    <el-input v-model="addFrom.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="是否赠送礼包:">
                    <el-radio v-model="addFrom.isGiftPackage" :label="true">是</el-radio>
                    <el-radio v-model="addFrom.isGiftPackage" :label="false">否</el-radio>
                </el-form-item>
                <el-form-item label="服务:">
                    <el-select placeholder="卡片服务类别" style="width: 200px;" clearable v-model="addFrom.checkServer">
                        <el-option v-for="(item,index) in serverList" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="卡片级别:">
                    <el-select placeholder="卡片级别" style="width: 200px;" clearable v-model="addFrom.defaultRank">
                        <el-option v-for="(item,index) in rankList" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="服务费月份:">
                    <el-input v-model="addFrom.giftMonth" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="状态:">
                    <el-radio v-model="addFrom.status" :label="true">启用</el-radio>
                    <el-radio v-model="addFrom.status" :label="false">禁用</el-radio>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showadd = false">取 消</el-button>
                <el-button type="primary" @click="addOne">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script >
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { DefaultRankDict,CheckServerDict,PagingCategory,DisableCategory,EnableCategory,Export,AddCategory } from '@/api/card';
export default {
    // import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        // 这里存放数据
        return {
            query: {
                pageIndex: 1,
                pageSize: 20,
                checkServer: '',
                rank: ''
            },
            showDetail: false,
            tableDetail: [],
            tableData: [],
            pageTotal: 0,
            rankList:[],
            serverList:[],
            showadd:false,
            addFrom:{
                isGiftPackage:true,
                status:true
            }
        };
    },
    // 过滤器
    filters: {},
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        pageChange(e) {
            this.query.pageIndex = e;
            this.getList();
        },
        getList() {
            PagingCategory(this.query).then((res) => {
                this.tableData = res.Data.list;
                this.pageTotal = res.Data.paging.totalItemCount;
            });
        },
        sizeChange(e) {
            this.query.pageSize = e;
            this.getList();
        },
        getRankList(){
            DefaultRankDict().then(res => {
                this.rankList = res.Data.dropList
            })
            CheckServerDict().then(res => {
                this.serverList = res.Data.dropList
            })
        },
        close(id){
            DisableCategory({id:id}).then(res => {
                if(res.RequestStatus == 200){
                    this.$message.success('禁用成功')
                    this.getList()
                }
                // console.log(res)
            })
        },
        open(id){
            EnableCategory({id:id}).then(res => {
                if(res.RequestStatus == 200){
                    this.$message.success('启用成功')
                    this.getList()
                }
                console.log(res)
            })
        },
        addOne(){
            AddCategory(this.addFrom).then(res => {
                if(res.RequestStatus == 200){
                    this.$message.success('添加成功')
                    this.showadd = false
                    this.addFrom = {
                isGiftPackage:true,
                status:true
            }
                    this.getList()
                }
            })
        },
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
        // console.log(123);
        this.getRankList()
        this.getList();
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, // 生命周期 - 创建之前
    beforeMount() {}, // 生命周期 - 挂载之前
    beforeUpdate() {}, // 生命周期 - 更新之前
    updated() {}, // 生命周期 - 更新之后
    beforeDestroy() {}, // 生命周期 - 销毁之前
    destroyed() {}, // 生命周期 - 销毁完成
    ctivated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>